<template>
    <div class="runDetail">
        <div class="main">
            <div class="echart">
                <runDetailLine :switch="currentView"></runDetailLine>
            </div>
            <div class="detail">
                <div class="title">
                    <div>1#主机</div>
                    <div>(1#主机)</div>
                </div>
                <div class="statu">
                    <div>开机状态</div>
                    <div class="detailStatu">启动</div>
                </div>
                <div class="statu">
                    <div>运行状态</div>
                    <div class="detailStatu">运行</div>
                </div>
            </div>
        </div>
        <!-- 轮播切换按钮 -->
        <div class="switchBtn">
            <span class="dot" v-for="n in 4" :key="n" @click="switchView(n)"
                :class="{ active: n - 1 === currentView }"></span>
        </div>
    </div>
</template>

<script setup>
import runDetailLine from './runDetailLine.vue';
import { ref } from 'vue';
const currentView = ref(0);
const switchView = (viewNumber) => {
    currentView.value = viewNumber - 1;
};
</script>

<style scoped lang="scss">
.runDetail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    font-size: 16rem;

    .main {

        flex: 0 0 50%;
        width: 100%;
        display: flex;

        .echart {
            flex: 0 0 75%;
            margin-right: 5%;
        }

        .detail {
            flex: 0 0 20%;
        }
    }

    .switchBtn {
        flex: 0 0 10%;
        width: 80%;
        margin: 10px auto;
        left: auto;
        display: flex;
        gap: 20px;
        justify-content: center;

        .dot {
            height: 10px;
            width: 10px;
            background-color: #2a5781;
            border-radius: 50%;
            cursor: pointer;
        }

        .dot.active {
            background-color: #409eff;
        }
    }

}








.title {
    background-color: #202856;
    color: white;
    font-size: 14rem;
    text-align: center;
}

.statu {
    color: white;
    font-size: 14rem;
    text-align: center;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


.detailStatu {
    background-color: #00d6b8;
    width: 80%;
}
</style>